import React, { useRef, useEffect } from 'react';
import { Button } from 'antd';
import GModal from './index';
import GForm from '../GForm';

const ModalForm = ({
  title,
  visible,
  formSet,
  column = 1,
  initialValues = {},
  loading,
  onOk,
  width = 500,
  onCancel,
  onValuesChange,
  formProps = {},
  getContainer,
  actionRef = useRef(),
}) => {
  const modalProps = {
    title,
    visible,
    onCancel,
    getContainer,
    width,
    footer: (
      <>

        <Button
          onClick={() => {
            actionRef.current.submit();
          }}
          type="primary">
          保存
        </Button>
        <Button
          onClick={() => {
            actionRef.current.reset();
          }}>
          重置
        </Button>
      </>
    )
  };

  const fProps = {
    formSet,
    column,
    loading,
    initialValues,
    defaultFooterBar: false,
    labelBasicSpan: 5,
    onValuesChange,
    submitCall: onOk,
    ...formProps
  };

  useEffect(() => {
    if (!visible && actionRef.current) {
      actionRef.current.resetFields();
    }
  }, [visible])

  return (
    <GModal {...modalProps}>
      <GForm {...fProps} ref={actionRef} />
    </GModal>
  );
};

export default ModalForm;
